<template>
  <!-- MV视频列表 -->
  <view class="RecommendList appFlex-five">
    <view
      class="RecommendItem"
      v-for="(item, index) in MecommendS"
      :key="index"
      @click="goMv(item)"
    >
      <image :src="item.cover">
      <view class="text app-text">{{ item.name }}</view>
          <view class="time">{{item.duration |formatS}}</view>
          <text class="icon iconfont icon-bofang"></text>
    </view>
    
  </view>
</template>

<script>
import moment from "moment";
export default {
  props: {
    MecommendS: {
      type: Array,
    },
  },
  filters: {
    //过滤视频时长
    formatS(val) {
      let newTime = moment(val).format("mm:ss");
      return newTime;
    },
  },
  methods: {
    goMv(item) {
      uni.navigateTo({
        url:
          "/pagesD/playMv/PlayMv?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
  },
};
</script>

<style lang="less">
.RecommendList {
  .RecommendItem {
    position: relative;
    margin-top: 35rpx;
    width: 330rpx;
    height: 300rpx;
    image {
      width: 330rpx;
      height: 190rpx;
      border-radius: 10rpx 10rpx 0 0;
    }
    .text {
      margin-top: 10rpx;
      font-size: 30rpx;
      width: 330rpx;
    }
    .time {
      position: absolute;
      bottom: 120rpx;
      right: 20rpx;
      font-size: 28rpx;
      background: rgba(0, 0, 0, 0.1);
      color: #fff;
    }
    .icon {
      position: absolute;
      bottom: 120rpx;
      left: 20rpx;
      font-size: 50rpx;
      background: rgba(0, 0, 0, 0.1);
      color: #fff;
    }
  }
}
</style>